<template>
    <div class="grid" :class="setBorderClass">
        <div class="grid-flex" v-if="gridGroup.length>0" v-for="(items,i) in gridGroup" :key="i">
            <div class="grid-item" hover-class="grid-item-hover" :hover-start-time="20" :hover-stay-time="70"
                 v-for="(item,index) in items"
                 :key="index" :class="[index === columnNumber ? 'grid-item-last' : '','grid-item-' + type]"
                 :style="{flexBasis:100/columnNumber + '%'}"
                 @click="onClick(index * columnNumber + num,data[index * columnNumber + num])">
                <div class="grid-item-content">
                    <img class="grid-item-image" :src="item.image">
                    <a class="grid-item-text">{{item.text}}</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";

    @Component({})
    //宫格
    export default class Grid extends Vue {
        //宫格布局数据，格式为：[{image:'xxx',text:'xxx'},{image:'xxx',text:'xxx'}]
        @Prop({default: [], type: Array})
        private data!: Array<object>;
        //宫格的类型，可取值：square（正方形）/oblong（长方形）
        @Prop({default: "oblong", type: String})
        private type!: string;
        //每行有多少个
        @Prop({default: 3, type: Number})
        private columnNum!: number;
        //是否显示外边框
        @Prop({default: false, type: Boolean})
        private showOutBorder!: boolean;
        //是否显示边框（如果为false，则show-out-border设置无效）
        @Prop({default: false, type: Boolean})
        private showBorder!: boolean;


        private get columnNumber(): number {
            return Number(this.columnNum) ? Number(this.columnNum) : 3;
        }

        private get gridGroup(): Array<Array<object>> {
            let group: Array<Array<object>> = [];
            let groupItem: Array<object> = [];
            this.data && this.data.forEach((item, index) => {
                groupItem.push(item);
                if (index % this.columnNum === this.columnNum - 1) {
                    group.push(groupItem);
                    groupItem = [];
                }
            });
            if (groupItem.length > 0) {
                group.push(groupItem)
            }
            groupItem = [];
            return group;
        }

        private get setBorderClass(): Array<string> {
            let classList:Array<string> = [];
            if (this.showBorder === false) {
                classList.push("grid-no-border");
                return classList;
            }
            if (this.showOutBorder === false) {
                classList.push("grid-no-out-border");
            }
            return classList;
        }

        //点击 grid 触发事件
        //@arg index：宫格下标，item:data对象
        @Emit("click")
        private onClick(index: number, item: object): void {
        }

    }
</script>

<style scoped lang="stylus">
    .grid
        position relative;
        display flex;
        flex-direction column;

        .grid-flex
            display flex;
            flex-direction row;


        .grid-item
            display flex;
            position relative;
            flex-direction column;

            &:before
                display block;
                content " ";
                padding-bottom 100%;


            &:after
                content '';
                position absolute;
                z-index 1;
                transform-origin center;
                box-sizing border-box;
                top -50%;
                left -50%;
                right -50%;
                bottom -50%;
                border-color #ddd;
                border-style solid;
                border-width 1px;
                -webkit-transform scale(.5);
                transform scale(.5);
                border-top-width 0;
                border-left-width 0;


            .grid-item-content
                position absolute;
                left 0;
                top 0;
                width 100%;
                height 100%;
                display flex;
                flex-direction column;
                justify-content center;
                align-items center;


            .grid-item-text
                font-size 12px;
                color #666;
                margin-top 6px;


            .grid-item-hover
                background-color #fff;


            .grid-item-image
                width 32px;
                height 32px;


    .grid .grid-flex:first-child .grid-item:after
        border-top-width 1px;


    .grid .grid-flex .grid-item:first-child:after
        border-left-width 1px;


    /* 无外边框 */
    .grid.grid-no-out-border .grid-flex
        &:first-child
            .grid-item
                &:after
                    border-top-width 0;


        &:last-child
            .grid-item
                &:after
                    border-bottom-width 0;


        .grid-item:first-child
            &:after
                border-left-width 0;


        .grid-item:last-child
            &:after
                border-right-width 0;


    /* 无边框 */

    .grid.grid-no-border
        .grid-item
            &:after
                border-width 0;

        .grid-flex
            &:first-child
                .grid-item
                    &:after
                        border-top-width 0;

        .grid-flex
            .grid-item
                &:first-child
                    &:after
                        border-left-width 0;


    .grid-item-oblong
        &.grid-item
            &:before
                padding-bottom 80%;


        .grid-item
            .grid-item-content
                flex-direction row;

                .grid-item-image
                    width 32px;
                    height 32px;


                .grid-item-text
                    margin-top 0;
                    margin-left 24px;
</style>